{% extends "base.html" %}

{% block title %}个人中心 - 畅读小说网{% endblock %}

{% block content %}
<style>
    /* 整体容器样式 */
   .profile-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
    }

    /* 个人中心头部样式 */
   .profile-header {
        text-align: center;
        margin-bottom: 40px;
    }

   .profile-header h1 {
        font-size: 2.5rem;
        font-weight: bold;
        color: #333;
    }

    /* 消息提示样式 */
   .messages {
        margin-bottom: 20px;
    }

   .alert {
        padding: 10px;
        border-radius: 5px;
        margin-bottom: 10px;
    }

   .alert-success {
        background-color: #d4edda;
        color: #155724;
    }

   .alert-error {
        background-color: #f8d7da;
        color: #721c24;
    }

    /* 个人中心内容样式 */
   .profile-content {
        display: flex;
        gap: 20px;
    }

    /* 侧边栏样式 */
   .profile-sidebar {
        width: 250px;
        background-color: #f9f9f9;
        border-radius: 5px;
        padding: 20px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

   .user-avatar {
        text-align: center;
        margin-bottom: 20px;
    }

   .user-avatar img {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        object-fit: cover;
    }

   .default-avatar {
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background-color: #007BFF;
        color: white;
        font-size: 2rem;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 0 auto;
    }

   .user-role {
        margin-top: 10px;
        color: #666;
    }

   .sidebar-menu ul {
        list-style-type: none;
        padding: 0;
    }

   .sidebar-menu li {
        margin-bottom: 10px;
    }

   .sidebar-menu li a {
        display: block;
        padding: 10px;
        border-radius: 5px;
        text-decoration: none;
        color: #333;
    }

   .sidebar-menu li a:hover {
        background-color: #e0e0e0;
    }

   .sidebar-menu li.active a {
        background-color: #007BFF;
        color: white;
    }

    /* 主内容样式 */
   .profile-main {
        flex: 1;
    }

   .profile-section {
        background-color: #fff;
        border-radius: 5px;
        padding: 20px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        margin-bottom: 20px;
    }

   .profile-section h2 {
        font-size: 2rem;
        font-weight: bold;
        color: #333;
        margin-bottom: 20px;
    }

    /* 表单样式 */
   .form-group {
        margin-bottom: 20px;
    }

   .form-group label {
        display: block;
        font-weight: bold;
        color: #333;
        margin-bottom: 5px;
    }

   .form-group input[type="text"],
   .form-group input[type="email"],
   .form-group input[type="file"],
   .form-group textarea {
        width: 100%;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 5px;
        outline: none;
    }

   .form-text.text-muted {
        color: #999;
        font-size: 0.9rem;
        margin-top: 5px;
    }

    /* 按钮样式 */
   .btn.btn-primary {
        padding: 10px 20px;
        background-color: #007BFF;
        color: white;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }

   .btn.btn-primary:hover {
        background-color: #0056b3;
    }

    /* 账号统计样式 */
   .stats-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        gap: 20px;
    }

   .stat-item {
        text-align: center;
        background-color: #f9f9f9;
        border-radius: 5px;
        padding: 20px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    }

   .stat-number {
        font-size: 2rem;
        font-weight: bold;
        color: #333;
        margin-bottom: 10px;
    }

   .stat-label {
        color: #666;
    }
</style>
<div class="profile-container">
    <div class="profile-header">
        <h1>个人中心</h1>
    </div>

    {% if messages %}
    <div class="messages">
        {% for message in messages %}
        <div class="alert {% if message.tags %}alert-{{ message.tags }}{% endif %}">
            {{ message }}
        </div>
        {% endfor %}
    </div>
    {% endif %}

    <div class="profile-content">
        <div class="profile-sidebar">
            <div class="user-avatar">
                {% if user.avatar %}
                    <img src="{{ user.avatar.url }}" alt="{{ user.username }}">
                {% else %}
                    <div class="default-avatar">{{ user.username|first|upper }}</div>
                {% endif %}
                <div class="user-role">{{ user.get_role_display }}</div>
            </div>
            <div class="sidebar-menu">
                <ul>
                    <li class="active"><a href="{% url 'user_profile' %}">个人信息</a></li>
                    <li><a href="{% url 'change_password' %}">修改密码</a></li>
                    <li><a href="{% url 'bookshelf' %}">我的书架</a></li>
                    {% if user.role == 'reader' %}
                    <li><a href="{% url 'author_apply' %}">申请成为作者</a></li>
                    {% endif %}
                    {% if user.role == 'author' %}
                    <li><a href="{% url 'author_center' %}">作家中心</a></li>
                    {% endif %}
                </ul>
            </div>
        </div>

        <div class="profile-main">
            <div class="profile-section">
                <h2>基本信息</h2>
                <form method="post" action="{% url 'user_profile' %}" enctype="multipart/form-data">
                    {% csrf_token %}
                    <div class="form-group">
                        <label for="username">用户名</label>
                        <input type="text" name="username" id="username" value="{{ user.username }}" readonly>
                        <small class="form-text text-muted">用户名不可修改</small>
                    </div>
                    <div class="form-group">
                        <label for="email">电子邮箱</label>
                        <input type="email" name="email" id="email" value="{{ user.email }}" required>
                    </div>
                    <div class="form-group">
                        <label for="avatar">头像</label>
                        <input type="file" name="avatar" id="avatar" accept="image/*">
                        <small class="form-text text-muted">支持JPG、PNG格式，大小不超过2MB</small>
                    </div>
                    <div class="form-group">
                        <label for="bio">个人简介</label>
                        <textarea name="bio" id="bio" rows="4">{{ user.bio }}</textarea>
                    </div>
                    <button type="submit" class="btn btn-primary">保存修改</button>
                </form>
            </div>

            <div class="profile-section">
                <h2>账号统计</h2>
                <div class="stats-grid">
                    <div class="stat-item">
                        <div class="stat-number">{{ bookshelf_count }}</div>
                        <div class="stat-label">书架藏书</div>
                    </div>
                    {% if user.role == 'author' %}
                    <div class="stat-item">
                        <div class="stat-number">{{ novel_count }}</div>
                        <div class="stat-label">创作作品</div>
                    </div>
                    {% endif %}
                    <div class="stat-item">
                        <div class="stat-number">{{ days_registered }}</div>
                        <div class="stat-label">注册天数</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}    